<template>
  <uni-list :border="false" class="video-list">
    <uni-list-item clickable @click="goToVideo(index)" v-for="item,index in list" :key="index">
      <template v-slot:body>
        <view class="video-item">
          <view class="play-content">
            <image v-if="showIndex" class="img" :src="item.coverUrl" mode="aspectFit"></image>
            <video v-else preload="none" muted="false" class="video" :src="item.videoUrl[0].url" :poster="item.coverUrl"
              enable-progress-gesture="false" show-fullscreen-btn="false" show-play-btn="false"
              show-center-play-btn="false"></video>
          </view>
          <view class="info">
            <view class="title">
              {{item.title}}
            </view>
            <view class="user">
              {{item.creator.nickname}}
            </view>
            <view class="playCount">
              {{numberFormat(item.playTime)}}次播放
            </view>
          </view>
        </view>

      </template>
    </uni-list-item>
  </uni-list>
  <uni-load-more v-if="list.length" :status="status"></uni-load-more>
</template>
<script setup>
  import {audio} from '@/utils/audio.js'
  import {
    numberFormat
  } from '@/utils/index.js'
  import {
    ref
  } from "vue";
  const props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
    status: {
      type: String,
      default: 'more'
    }
  })
  const goToVideo = (index) => {
    // 暂停播放中的音乐
    if(!audio.paused){
      audio.pause()
    }
    let obj = encodeURIComponent(JSON.stringify(props.list))
    if(obj.indexOf('%') > -1){
      obj = obj.replace(/%/g, '%25');
    }
    uni.navigateTo({
      url: `/pages/video/video?list=${obj}&index=${index}`
    })
  }
  const showIndex = ref(true)
  
</script>
<style lang="less">
  .video-list {
    .video-item {
      display: flex;
      align-items: center;

      .play-content {
        margin-right: 20rpx;

        .video {
          width: 310rpx;
          height: 200rpx;
          border-radius: 15rpx;
        }

        .img {
          width: 310rpx;
          height: 200rpx;
          border-radius: 15rpx;
          background-color: #000;
        }
      }

      .info {
        .title {
          font-size: 32rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .user {
          font-size: 24rpx;
          color: #7d7d7d;
          margin: 10rpx 0;
        }

        .playCount {
          font-size: 24rpx;
          color: #7d7d7d;
        }
      }
    }

  }
</style>
